<template>
	<view class="longbing-customer-item">
		<movable-area class="customer-movable-area fix" :style="{height:`330px`,bottom:`${configInfo.tabbarHeight}px`}"
			v-if="configInfo.popup_img_type==1 && configInfo.popup_img">
			<movable-view class="customer-movable-view" :x="customerMovable.x" :y="customerMovable.y"
				direction="vertical" @change="onChange">
				<view @tap.stop="$refs.customer_link_img.open()" class="customer-info flex-center">
					<image class="customer-img" src="https://api.huixuananmm.com/admin/kitchen/service/kefu.png">
					</image>
				</view>
			</movable-view>
		</movable-area>

		<uni-popup ref="customer_link_img" type="center" :maskClick="false">
			<!-- #ifndef H5 -->
			<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
			<!-- #endif -->
			<view class="customer-link-img flex-center flex-column">
				<image mode="widthFix" class="link-img" :src="configInfo.popup_img"></image>
				<i @tap.stop="$refs.customer_link_img.close()" class="iconfont icon-guanbi-fill"></i>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			img: {
				type: String,
				default () {
					return ''
				}
			}
		},
		mounted() {
		},
		data() {
			return {
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			customerMovable: state => state.user.customerMovable,
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getPopupImg']),
			...mapMutations(['updateUserItem']),
			onChange(e) {
				let {
					x,
					y
				} = e.detail
				this.updateUserItem({
					key: 'customerMovable',
					val: {
						x,
						y
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.customer-movable-area {
		width: 122rpx;
		right: 0;
		pointer-events: none;

		.customer-movable-view {
			width: 122rpx;
			height: 110rpx;
			pointer-events: auto;
		}
	}

	.longbing-customer-item {

		.customer-info,
		.customer-img {
			width:110rpx;
			height: 110rpx;
		}

		.customer-link-img {
			width: 588rpx;
			/* #ifdef H5 */
			margin: 25rpx 0;
			/* #endif */

			.link-img {
				width: 588rpx;
				max-height: 861rpx;
				margin-bottom: 19rpx;
			}

			.icon-guanbi-fill {
				font-size: 68rpx;
				color: #fff;
			}
		}
	}
</style>